{#{% extends "common/layout2.html" %}#}
{#{% block content %}#}
{##}
{#    <div class="row bg-primary">#}
{#        <div class="col-sm-10 col-sm-offset-1">#}
{#            <h2>移动办公平台数据管理系统</h2>#}
{#            <h6>Mobile office platform data management system</h6>#}
{#        </div>#}
{#    </div>#}
{##}
{#     <script type="text/x-template" id="grid-template">#}
{#      <table>#}
{#        <thead>#}
{#          <tr>#}
{#            <th v-for="key in columns"#}
{#              @click="sortBy(key)"#}
{#              :class="{ active: sortKey == key }">#}
{#              {{ key | capitalize }}#}
{#              <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">#}
{#              </span>#}
{#            </th>#}
{#          </tr>#}
{#        </thead>#}
{#        <tbody>#}
{#          <tr v-for="entry in filteredHeroes">#}
{#            <td v-for="key in columns">#}
{#              {{entry[key]}}#}
{#            </td>#}
{#          </tr>#}
{#        </tbody>#}
{#      </table>#}
{#    </script>#}
{##}
{##}
{##}
{##}
{#    <!-- demo root element -->#}
{#    <div id="demo">#}
{#        <form id="search">#}
{#            Search <input name="query" v-model="searchQuery"/>#}
{#        </form>#}
{#        <demo-grid#}
{#                :heroes="gridData"#}
{#                :columns="gridColumns"#}
{#                :filter-key="searchQuery"#}
{#        >#}
{#        </demo-grid>#}
{#    </div>#}
{##}
{#    <script>#}
{#        // register the grid component#}
{#        Vue.component("demo-grid", {#}
{#            template: "#grid-template",#}
{#            props: {#}
{#                heroes: Array,#}
{#                columns: Array,#}
{#                filterKey: String#}
{#            },#}
{#            data: function () {#}
{#                var sortOrders = {};#}
{#                this.columns.forEach(function (key) {#}
{#                    sortOrders[key] = 1;#}
{#                });#}
{#                return {#}
{#                    sortKey: "",#}
{#                    sortOrders: sortOrders#}
{#                };#}
{#            },#}
{#            computed: {#}
{#                filteredHeroes: function () {#}
{#                    var sortKey = this.sortKey;#}
{#                    var filterKey = this.filterKey && this.filterKey.toLowerCase();#}
{#                    var order = this.sortOrders[sortKey] || 1;#}
{#                    var heroes = this.heroes;#}
{#                    if (filterKey) {#}
{#                        heroes = heroes.filter(function (row) {#}
{#                            return Object.keys(row).some(function (key) {#}
{#                                return (#}
{#                                    String(row[key])#}
{#                                        .toLowerCase()#}
{#                                        .indexOf(filterKey) > -1#}
{#                                );#}
{#                            });#}
{#                        });#}
{#                    }#}
{#                    if (sortKey) {#}
{#                        heroes = heroes.slice().sort(function (a, b) {#}
{#                            a = a[sortKey];#}
{#                            b = b[sortKey];#}
{#                            return (a === b ? 0 : a > b ? 1 : -1) * order;#}
{#                        });#}
{#                    }#}
{#                    return heroes;#}
{#                }#}
{#            },#}
{#            filters: {#}
{#                capitalize: function (str) {#}
{#                    return str.charAt(0).toUpperCase() + str.slice(1);#}
{#                }#}
{#            },#}
{#            methods: {#}
{#                sortBy: function (key) {#}
{#                    this.sortKey = key;#}
{#                    this.sortOrders[key] = this.sortOrders[key] * -1;#}
{#                }#}
{#            }#}
{#        });#}
{##}
{#        // bootstrap the demo#}
{#        var demo = new Vue({#}
{#            el: "#demo",#}
{#            data: {#}
{#                searchQuery: "",#}
{#                gridColumns: ["name", "power"],#}
{#                gridData: [#}
{#                    {name: "Chuck Norris", power: Infinity},#}
{#                    {name: "Bruce Lee", power: 9000},#}
{#                    {name: "Jackie Chan", power: 7000},#}
{#                    {name: "Jet Li", power: 8000}#}
{#                ]#}
{#            }#}
{#        });#}
{#    </script>#}
{##}
{##}
{##}
{#    模态框#}
{#    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">#}
{#        <div class="modal-dialog" role="document">#}
{#            <div class="modal-content">#}
{#                <div class="modal-header">#}
{#                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span#}
{#                            aria-hidden="true">&times;</span></button>#}
{#                    <h4 class="modal-title" id="exampleModalLabel">修改用户信息</h4>#}
{#                </div>#}
{#                <div class="modal-body">#}
{##}
{#                    <form style="margin-top: 10px" method="post" role="form">#}
{##}
{#                        <div class="form-group">#}
{#                            <label class="control-label">ID:</label>#}
{#                            <input type="text" class="form-control" id="id" name="id">#}
{#                        </div>#}
{##}
{#                        <div class="form-group">#}
{#                            <label class="control-label">姓名:</label>#}
{#                            <input type="text" class="form-control" id="name" name="name">#}
{#                        </div>#}
{##}
{#                        <div class="form-group">#}
{#                            <label for="recipient-name" class="control-label">公司:</label>#}
{#                            <select type="text" class="form-control" id="company" name="company">#}
{#                                {% for item in company %}#}
{#                                    <option>#}
{#                                        {{ item.company }}#}
{#                                    </option>#}
{#                                {% endfor %}#}
{#                            </select>#}
{##}
{#                        </div>#}
{##}
{#                        <div class="form-group">#}
{#                            <label for="recipient-name" class="control-label">部门:</label>#}
{#                            <select type="text" class="form-control" id="department" name="department">#}
{#                                {% for item in department %}#}
{#                                    <option>#}
{#                                        {{ item.department }}#}
{#                                    </option>#}
{#                                {% endfor %}#}
{#                            </select>#}
{#                        </div>#}
{##}
{#                        <div class="form-group">#}
{#                            <label for="recipient-name" class="control-label">城市:</label>#}
{#                            <select type="text" class="form-control" id="city" name="city">#}
{#                                {% for item in city %}#}
{#                                    <option>#}
{#                                        {{ item.city }}#}
{#                                    </option>#}
{#                                {% endfor %}#}
{#                            </select>#}
{#                        </div>#}
{##}
{#                        <div class="form-group">#}
{#                            <label for="recipient-name" class="control-label">手机:</label>#}
{#                            <input type="text" class="form-control" id="phone" name="phone">#}
{#                        </div>#}
{##}
{#                        <div class="form-group">#}
{#                            <label for="message-text" class="control-label">角色:</label>#}
{#                            <select class="selectpicker form-control" id="role" name="role"#}
{#                                    title="请选择" data-hide-disabled="true"#}
{#                                    multiple>#}
{#                                <option>用户</option>#}
{#                                <option>区域人事行政</option>#}
{#                                <option>耗材管理员</option>#}
{#                                <option>工卡管理员</option>#}
{#                                <option>寄件管理员</option>#}
{#                                <option>印鉴管理员</option>#}
{#                                <option>会议室管理员</option>#}
{#                                <option>培训管理员</option>#}
{#                                <option>招聘管理员</option>#}
{#                                <option>食堂管理员</option>#}
{#                                <option>系统管理员</option>#}
{##}
{#                            </select>#}
{##}
{#                        </div>#}
{##}
{##}
{#                        <div class="modal-footer">#}
{#                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>#}
{#                            <button class="btn btn-primary do-updata" type="submit" name="updata" id="updata">更新人员信息#}
{#                            </button>#}
{#                        </div>#}
{##}
{#                    </form>#}
{#                </div>#}
{##}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{##}
{#赋值#}
{#    <script>#}
{#        $('#exampleModal').on('show.bs.modal', function (event) {#}
{#            var button = $(event.relatedTarget);#}
{#            var role = button.data('role').split(",");#}
{##}
{#            $("input[name=name]").val(button.data('name'));#}
{#            $("input[name=id]").val(button.data('id'));#}
{#            $("input[name=phone]").val(button.data('phone'));#}
{#            $("select[name=company]").val(button.data('company'));#}
{#            $("select[name=department]").val(button.data('department'));#}
{#            $("select[name=role]").selectpicker('val', role);#}
{#        });#}
{#    </script>#}
{##}
{#搜索#}
{#    <script>#}
{##}
{#        $('#search').click(function () {#}
{#            let type = $("select[name='type']").val();#}
{#            let content = $("input[name='search']").val();#}
{#            location.href = "{{ buildUrl('/member/search')}}?content=" + content + "&type=" + type#}
{#        })#}
{#    </script>#}
{##}
{#更新#}
{#    <script>#}
{#        $(".do-updata").click(function () {#}
{#            var btnaction = $(this);#}
{#            if (btnaction.hasClass("disable")) {#}
{#                common_ops.alert("还没提交上去了，别瞎点")#}
{#                return#}
{#            }#}
{##}
{##}
{#            var id = $("input[name=id]").val();#}
{#            var name = $("input[name=name]").val();#}
{#            var phone = $("input[name=phone]").val();#}
{##}
{#            var company = $("select[name=company]").val();#}
{#            var department = $("select[name=department]").val();#}
{#            var city = $("select[name=city]").val();#}
{#            var role = $("select[name=role]").val().toString();#}
{##}
{##}
{#            $.ajax({#}
{#                url: common_ops.buildUrl("/member/adminupdate"),#}
{#                type: "POST",#}
{#                data: {#}
{#                    name: name,#}
{#                    company: company,#}
{#                    department: department,#}
{#                    city: city,#}
{#                    role: role,#}
{#                    id: id,#}
{#                    phone: phone,#}
{#                },#}
{#                dataType: 'json',#}
{#                success: function (res) {#}
{#                    btnaction.removeClass("disabled");#}
{#var callback = null;#}
{#if (res.code == 200) {#}
{#    callback = function () {#}
{#    };}#}
{#common_ops.alert(res.msg, callback);#}
{#setTimeout(function () {#}
{#    $('#exampleModal').modal('hide');#}
{#    $(".modal-backdrop.fade").hide();#}
{#window.location.href = common_ops.buildUrl("/parter/parterindex");#}
{#    $("#exampleModal").trigger("click");}, 1000)#}
{##}
{#                }#}
{#            });#}
{##}
{#        });#}
{#    </script>#}
{##}
{##}
{##}
{#{% endblock %}#}
{##}
{##}
{#{% block js %}#}
{##}
{#    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">#}
{#    <link rel="stylesheet" href="{{ buildStaticUrl('/plugins/bootstrap-select/bootstrap-select.css') }}">#}
{##}
{#    <script src="{{ buildStaticUrl('/js/jquery1.11.3.js') }}"></script>#}
{#    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
{#    <script src="{{ buildStaticUrl('/plugins/bootstrap-select/bootstrap-select.js') }}"></script>#}
{##}
{#{% endblock %}#}


{#<!DOCTYPE html>#}
{#<html>#}
{#<head>#}
{#    <title>Grid Component</title>#}
{#    <script src="https://unpkg.com/vue@2"></script>#}
{#    <link rel="stylesheet" type="text/css" href="/style.css"/>#}
{##}
{#    <!-- component template -->#}
{#    <script type="text/x-template" id="grid-template">#}
{#        <table>#}
{#            <thead>#}
{#            <tr>#}
{#                <th v-for="key in columns"#}
{#                    @click="sortBy(key)"#}
{#                    :class="{ active: sortKey == key }">#}
{#                    {{ key | capitalize }}#}
{#                    <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">#}
{#              </span>#}
{#                </th>#}
{#            </tr>#}
{#            </thead>#}
{#            <tbody>#}
{#            <tr v-for="entry in filteredHeroes">#}
{#                <td v-for="key in columns">#}
{#                    {{ entry[key] }}#}
{#                </td>#}
{#            </tr>#}
{#            </tbody>#}
{#        </table>#}
{#    </script>#}
{#</head>#}
{#<body>#}
{#<!-- demo root element -->#}
{#<div id="demo">#}
{#    <form id="search">#}
{#        Search <input name="query" v-model="searchQuery"/>#}
{#    </form>#}
{#    <demo-grid#}
{#            :heroes="gridData"#}
{#            :columns="gridColumns"#}
{#            :filter-key="searchQuery"#}
{#    >#}
{#    </demo-grid>#}
{#</div>#}
{##}
{#<script>#}
{#    // register the grid component#}
{#    Vue.component("demo-grid", {#}
{#        template: "#grid-template",#}
{#        props: {#}
{#            heroes: Array,#}
{#            columns: Array,#}
{#            filterKey: String#}
{#        },#}
{#        data: function () {#}
{#            var sortOrders = {};#}
{#            this.columns.forEach(function (key) {#}
{#                sortOrders[key] = 1;#}
{#            });#}
{#            return {#}
{#                sortKey: "",#}
{#                sortOrders: sortOrders#}
{#            };#}
{#        },#}
{#        computed: {#}
{#            filteredHeroes: function () {#}
{#                var sortKey = this.sortKey;#}
{#                var filterKey = this.filterKey && this.filterKey.toLowerCase();#}
{#                var order = this.sortOrders[sortKey] || 1;#}
{#                var heroes = this.heroes;#}
{#                if (filterKey) {#}
{#                    heroes = heroes.filter(function (row) {#}
{#                        return Object.keys(row).some(function (key) {#}
{#                            return (#}
{#                                String(row[key])#}
{#                                    .toLowerCase()#}
{#                                    .indexOf(filterKey) > -1#}
{#                            );#}
{#                        });#}
{#                    });#}
{#                }#}
{#                if (sortKey) {#}
{#                    heroes = heroes.slice().sort(function (a, b) {#}
{#                        a = a[sortKey];#}
{#                        b = b[sortKey];#}
{#                        return (a === b ? 0 : a > b ? 1 : -1) * order;#}
{#                    });#}
{#                }#}
{#                return heroes;#}
{#            }#}
{#        },#}
{#        filters: {#}
{#            capitalize: function (str) {#}
{#                return str.charAt(0).toUpperCase() + str.slice(1);#}
{#            }#}
{#        },#}
{#        methods: {#}
{#            sortBy: function (key) {#}
{#                this.sortKey = key;#}
{#                this.sortOrders[key] = this.sortOrders[key] * -1;#}
{#            }#}
{#        }#}
{#    });#}
{##}
{#    // bootstrap the demo#}
{#    var demo = new Vue({#}
{#        el: "#demo",#}
{#        data: {#}
{#            searchQuery: "",#}
{#            gridColumns: ["name", "power"],#}
{#            gridData: [#}
{#                {name: "Chuck Norris", power: Infinity},#}
{#                {name: "Bruce Lee", power: 9000},#}
{#                {name: "Jackie Chan", power: 7000},#}
{#                {name: "Jet Li", power: 8000}#}
{#            ]#}
{#        }#}
{#    });#}
{#</script>#}
{#</body>#}
{#</html>#}
